import dynamic from "next/dynamic"
import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"
import { useRouter } from "next/router"
import _ from "lodash"

const BasicLayout = dynamic(() => import("@/core/components/layouts/BasicLayout"))
const ProductSearch = dynamic(() => import("@/lib/product/components/ProductSearch"))
const Brand = dynamic(() => import("@/lib/brand/components/Brand"))

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query
  return (
    <BasicLayout>
      <Brand id={getIdFromSlug(slug)} />
      { !_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
        />
      ) }
    </BasicLayout>
  )
}